<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数博采集平台</title>
  <!-- 引入Layui CSS -->
  <link rel="stylesheet" href="js/layui/new/layui-new.css">
  <style>
    body {
      background-color: #f5f7fa;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      background-image:
              radial-gradient(circle at 10% 20%, rgba(72, 155, 248, 0.05) 0%, transparent 20%),
              radial-gradient(circle at 90% 60%, rgba(72, 155, 248, 0.05) 0%, transparent 20%);
    }

    .login-container {
      width: 100%;
      max-width: 420px;
      padding: 0 20px;
    }

    .login-card {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .login-card:hover {
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

    .login-header {
      padding: 30px 20px;
      text-align: center;
      border-bottom: 1px solid #f2f2f2;
    }

    .login-header .logo {
      width: 60px;
      height: 60px;
      margin: 0 auto 15px;
      border-radius: 50%;
      background-color: #1E9FFF;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
    }

    .login-header h2 {
      margin: 0;
      font-size: 22px;
      color: #333;
      font-weight: 600;
    }

    .login-body {
      padding: 30px 25px;
    }

    .layui-form-item {
      margin-bottom: 20px;
    }

    .layui-form-label {
      width: 48px;
      padding: 9px 0;
      color: #666;
      text-align: center;
    }

    .layui-input-block {
      margin-left: 48px;
    }

    .layui-input {
      height: 44px;
      border-radius: 6px;
      border-color: #e6e6e6;
      transition: all 0.2s ease;
      padding-left: 14px;
    }

    .layui-input:focus {
      border-color: #1E9FFF;
      box-shadow: 0 0 0 2px rgba(30, 159, 255, 0.1);
    }

    .verify-code {
      display: flex;
      gap: 10px;
    }

    .verify-code .layui-input {
      flex: 1;
    }

    .code-img {
      width: 120px;
      height: 44px;
      border-radius: 6px;
      background-color: #f2f2f2;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      letter-spacing: 3px;
      color: #333;
      user-select: none;
    }

    .login-footer {
      text-align: center;
      padding: 0 25px 30px;
    }

    .layui-btn {
      width: 100%;
      height: 46px;
      font-size: 16px;
      border-radius: 6px;
      background-color: #1E9FFF;
      border-color: #1E9FFF;
      transition: all 0.2s ease;
    }

    .layui-btn:hover {
      background-color: #0d8ce8;
      border-color: #0d8ce8;
      transform: translateY(-1px);
    }

    .layui-btn:active {
      transform: translateY(1px);
    }

    .links {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      gap: 20px;
      font-size: 14px;
    }

    .links a {
      color: #666;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .links a:hover {
      color: #1E9FFF;
    }

    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .login-card {
      animation: fadeIn 0.5s ease forwards;
    }

    .layui-form-item {
      animation: fadeIn 0.5s ease forwards;
      opacity: 0;
    }

    .layui-form-item:nth-child(1) { animation-delay: 0.1s; }
    .layui-form-item:nth-child(2) { animation-delay: 0.2s; }
    .layui-form-item:nth-child(3) { animation-delay: 0.3s; }
    .login-footer {
      animation: fadeIn 0.5s ease forwards;
      animation-delay: 0.4s;
      opacity: 0;
    }
  </style>
</head>
<body>
<div class="login-container">
  <div class="login-card">
    <div class="login-header">
      <div class="logo">
        <i class="layui-icon layui-icon-shield"></i>
      </div>
      <h2>数博采集平台</h2>
    </div>

    <div class="login-body">
      <form class="layui-form" lay-filter="loginForm">
        <div class="layui-form-item">
          <label class="layui-form-label">
            <i class="layui-icon layui-icon-user"></i>
          </label>
          <div class="layui-input-block">
            <input type="text" name="loginName" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">
            <i class="layui-icon layui-icon-password"></i>
          </label>
          <div class="layui-input-block">
            <input type="password" name="loginPwd" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">
            <i class="layui-icon layui-icon-vercode"></i>
          </label>
          <div class="layui-input-block">
            <div class="verify-code">
              <input type="text" name="verifyCode" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
              <div class="code-img" id="codeImg"></div>
            </div>
          </div>
        </div>
      </form>
    </div>

    <div class="login-footer">
      <button class="layui-btn" lay-submit lay-filter="loginBtn">登录</button>
      <div class="links">
        <a href="#" class="forgot-password">忘记密码</a>
      </div>
    </div>
  </div>
</div>


<!-- 引入Layui JS -->
<script src="js/layui/new/layui-new.js"></script>
<script>
  layui.use(['form', 'layer'], function() {
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.$; // 引入jQuery对象

    // 生成随机验证码
    function generateVerifyCode() {
      const codeLength = 4;
      const codeChars = '23456789ABCDEFGHJKLMNPQRSTUVWXYZ';
      let code = '';
      for (let i = 0; i < codeLength; i++) {
        const charIndex = Math.floor(Math.random() * codeChars.length);
        code += codeChars.charAt(charIndex);
      }

      // 绘制验证码图片
      const $codeImg = $('#codeImg');
      $codeImg.empty();

      const canvas = document.createElement('canvas');
      canvas.width = 120;
      canvas.height = 44;
      const ctx = canvas.getContext('2d');

      // 背景色
      ctx.fillStyle = getRandomColor(240, 250);
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // 绘制文本
      ctx.font = 'bold 22px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillStyle = getRandomColor(50, 160);
      ctx.fillText(code, canvas.width / 2, canvas.height / 2);

      // 绘制干扰线和干扰点
      for (let i = 0; i < 4; i++) {
        ctx.strokeStyle = getRandomColor(150, 200);
        ctx.beginPath();
        ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.stroke();
      }
      for (let i = 0; i < 30; i++) {
        ctx.fillStyle = getRandomColor(150, 200);
        ctx.beginPath();
        ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, 2 * Math.PI);
        ctx.fill();
      }

      $codeImg.append(canvas);
      $codeImg.attr('data-code', code.toLowerCase());
    }

    // 生成随机颜色
    function getRandomColor(min, max) {
      const r = min + Math.floor(Math.random() * (max - min + 1));
      const g = min + Math.floor(Math.random() * (max - min + 1));
      const b = min + Math.floor(Math.random() * (max - min + 1));
      return `rgb(${r}, ${g}, ${b})`;
    }

    // 初始化验证码
    generateVerifyCode();

    // 事件绑定
    $("body")
            .on('click', '#codeImg', function() {
              generateVerifyCode();
            })
            .on('click', '.forgot-password', function(e) {
              e.preventDefault();
              layer.alert('请联系管理员重置密码', {title: '忘记密码'});
            });

    form.on('submit(loginBtn)', function() {  // 移除回调参数 data
      // 改用 form.val() 主动获取表单数据（依赖表单的 lay-filter="loginForm"）
      const formData = form.val('loginForm');  // 直接从表单获取数据，不依赖事件参数

      // 调试：打印获取到的表单数据，确认是否正确
      //console.log('表单数据:', formData);

      // 验证码验证（使用 formData 替代 data.field）
      const inputCode = (formData.verifyCode || '').trim().toLowerCase();
      const correctCode = $('#codeImg').attr('data-code');

      if (inputCode.length === 0) {
        layer.msg('请输入验证码', {icon: 2, time: 1500});
        return false;
      }

      if (inputCode.length !== 4) {
        layer.msg('验证码长度不正确', {icon: 2, time: 1500});
        return false;
      }

      if (inputCode !== correctCode) {
        layer.msg('验证码错误', {icon: 2, time: 1500});
        generateVerifyCode();
        return false;
      }

      // 登录数据（使用 formData 中的字段）
      const loginData = {
        loginName: formData.loginName,  // 从表单数据中获取账号
        loginPwd: formData.loginPwd     // 从表单数据中获取密码
      };

      // 显示加载层
      const loadIndex = layer.load(2);

      // 调用登录接口
      $.ajax({
        url: '/login',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(loginData),
        dataType: 'json',
        success: function(resp) {
          if (resp.code === 1) {
            layer.msg('登录成功，正在跳转...', {icon: 1, time: 300}, function() {
              window.location.href = 'index.html';
            });
          } else {
            layer.msg(resp.message , {icon: 2, time: 1500});
            generateVerifyCode();
          }
        },
        error: function(xhr) {
          if (xhr.responseJSON && xhr.responseJSON.msg) {
            layer.msg(xhr.responseJSON.msg, {icon: 2, time: 2000});
          } else {
            layer.msg('服务器连接失败，请稍后重试', {icon: 2, time: 2000});
          }
          generateVerifyCode();
        },
        complete: function() {
          layer.close(loadIndex);
        }
      });

      return false;
    });

  });
</script>
</body>
</html>
